<template>
	<view class="app">
		<tui-tabs :tabs="tabs" isFixed :currentTab="currentTab" selectedColor="#0ba9ff" sliderBgColor="#0ba9ff" @change="change" itemWidth="50%"></tui-tabs>
		<block v-if="currentTab == 0">
			<view class="item b-b " v-for="(item, index) in list[0]" :key="index">
				<view class="left column">
					<view class="tit clamp">{{ item.name }}</view>
					<view class="time">已完成：{{ item.finishNum }}/{{ item.needNum }}</view>
					<view class="time">奖励：{{ item.awardName }}</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="item b-b " v-for="(item, index) in list[1]" :key="index">
				<view class="left column">
					<view class="tit clamp">{{ item.name }}</view>
					<view v-if="item.awardName" class="time">奖励：{{ item.awardName }}</view>
					<view class="time">状态：{{ item.userAwardStateName }}</view>
					<view v-if="item.userExpressVo && item.userExpressVo.expressBusinessId" class="time">
						快递单号：{{ item.userExpressVo && item.userExpressVo.expressBusinessId }}
					</view>
					<view @click="handleSetting(item.id)" v-if="item.userAwardState == 'waitingSet'" class="button">设置地址</view>
				</view>
			</view>
		</block>
		<!-- <tui-no-data imgUrl="/static/images/toast/img_nodata.png" v-if="!loading && !list.length">暂无数据</tui-no-data> -->
		<view v-if="!loading && list.length" class="loading-more"><text class="loading-more-text">~~没有更多了~~</text></view>
		<Loading type="img" v-if="loading"></Loading>
	</view>
</template>

<script>
let typeMap = null;
import { queryGroupOrderAwardRecord, queryGroupOrderAward, settingGroupAddress } from '@/service/home.js';
import { logListPage } from '@/service/mine.js';
import { groupItemListByKey } from '@/service/upload.js';
export default {
	data() {
		return {
			tabs: [
				{
					name: '累积奖励'
				},
				{
					name: '我的奖励'
				}
			],
			params: {
				pageNum: 1,
				pageSize: 20
			},
			currentTab: 0,
			loading: true,
			list: [[], []],
			id: undefined
		};
	},
	async onLoad() {
		this.getList();
		this.$store.state.address = null;
	},
	onShow() {
		const address = this.$store.state.address;
		if (address) {
			settingGroupAddress({ userAddressId: address.id, id: this.id }, { loading: true }).then(v => {
				this.params.pageNum = 1;
				this.getList();
				this.$store.state.address = null;
			});
		}
	},
	onPullDownRefresh() {
		this.params.pageNum = 1;
		this.getList();
		setTimeout(v => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom() {
		this.getList();
	},
	methods: {
		change({ index }) {
			this.list[index] = [];
			this.currentTab = index;
			this.params.pageNum = 1;
			this.getList();
		},
		async getList() {
			if (this.currentTab === 0) {
				this.queryGroupOrderAward();
			} else {
				if (!typeMap) {
					await this.getGroupItemListByKey();
				}
				this.queryGroupOrderAwardRecord();
			}
		},
		handleSetting(id) {
			this.id = id;
			uni.navigateTo({
				url: '/pages/shop/address/address?type=' + 'select'
			});
		},
		async getGroupItemListByKey() {
			typeMap = {};
			const resp = await groupItemListByKey('rewardStatus');
			resp[0].typeItems.forEach(v => {
				typeMap[v.itemCode] = v.itemName;
			});
		},
		async queryGroupOrderAwardRecord() {
			try {
				this.loading = true;
				const resp = await queryGroupOrderAwardRecord({ ...this.params });
				if (typeMap) {
					resp.data = resp.data.map(v => {
						v.userAwardStateName = typeMap[v.userAwardState];
						return v;
					});
				}

				this.list[1] = this.params.pageNum == 1 ? resp.data : [...this.list[1], ...resp.data];
				this.params.pageNum++;
			} finally {
				this.loading = false;
				//TODO handle the exception
			}
		},
		async queryGroupOrderAward() {
			try {
				this.loading = true;
				const resp = await queryGroupOrderAward();
				this.list[0] = resp;
				console.log(resp);
			} finally {
				this.loading = false;
				//TODO handle the exception
			}
		}
	}
};
</script>

<style scoped lang="scss">
.app {
	padding-top: 90upx;
}
view {
	box-sizing: border-box;
}
.item {
	border-radius: 16upx;
	display: flex;
	width: 710upx;
	margin: 10rpx auto 20upx;
	padding: 30rpx 50rpx 30rpx 24rpx;
	background-color: #fff;

	&:after {
		left: 30rpx;
		border-color: #e8e8e8;
	}
	.mix-icon {
		flex-shrink: 0;
		width: 72rpx;
		font-size: 52rpx;
		transform: translateY(-6rpx);
	}
	.icon-tixian1 {
		color: #fd6663;
	}
	.icon-zhangdanmingxi01 {
		color: #ff893a;
	}
	.icon-chongzhi {
		color: #39c585;
	}
	.left {
		margin-left: 20upx;
		flex: 1;
		overflow: hidden;
	}
	.tit {
		font-size: 38rpx;
		color: $primary;
		line-height: 1.4;
		margin-bottom: 6rpx;
	}
	.time {
		margin-top: 20upx;
		font-size: 30rpx;
		color: #292222;
	}
	.price {
		margin-top: 20upx;
		font-size: 34rpx;
		color: $primary;
		font-weight: 700;
	}
	&.income {
		.price {
			color: #00c700;
		}
		.icon-zhangdanmingxi01 {
			color: #39c585;
		}
	}
}
.button {
	margin-top: 20upx;
	// display: inline-block;
	align-self: flex-end;
	background-color: #0ba9ff;
	// height: 60upx;
	padding: 16upx 20upx;
	display: flex;
	border-radius: 10upx;
	justify-content: center;
	align-items: center;
	color: #fff;
	// width: 140upx;
}
</style>
